﻿@using ETD.Common.Extension;
@using ETD.WebOrganization.Libs.Helper;
@using ETD.WinClient.Config;
@using ETD.Domain.EnumModels;
@using ETD.Domain.WebModels;
@using ETD.Common;
@model ETD.WebOrganization.Areas.Web.Models.SettlementManageModel
@{
    var uiSettlementList = Model.UISettlementList;
}
<style>
    .settlementItemLink {
        font-size: 14px;
    }

    .weui-cell_access .weui-cell__ft:after {
        display: none !important;
    }
</style>
<style>
    .money_summary {
        /*height: 180px;*/
        /*background-color: #50d2c2;*/
        background: linear-gradient(#50d2c2, #24d7c2); /* 标准的语法 */
    }

        .money_summary .weui-grids:before {
            border-top: 0px solid #D9D9D9;
        }

        .money_summary .weui-grids:after {
            border-left: 0px solid #D9D9D9;
        }

        .money_summary .weui-grid:before {
            border-right: 0px solid #D9D9D9;
        }

        .money_summary .weui-grid:after {
            border-bottom: 0px solid #D9D9D9;
        }

    .money_today {
        height: 110px;
        width: 100%;
    }

    .money_today_left {
        width: 16.6666%;
    }

    .money_today_right {
        width: 16.6666%;
    }

    .money_today_value {
        display: block;
        text-align: center;
        color: white;
        font-size: 46px;
    }

    .money_count {
        height: 100px;
        padding-top: 25px;
    }

    .money_count_label {
        display: block;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
        opacity: 0.8;
    }

    .money_count_value {
        display: block;
        text-align: center;
        color: white;
        font-size: 16px;
    }

    .money_summary_line_one {
    }

    .money_summary_line_two .weui-grid {
        width: 50% !important;
    }
</style>
<div class="money_summary">
    <div class="weui-grids money_summary_line_two">
        <div class="weui-grid money_count">
            <span class="money_count_label">累计结算金额</span>
            <span class="money_count_value">￥@Model.SettlementIncome.ToF2OrMark()</span>
        </div>
        <div class="weui-grid money_count">
            <span class="money_count_label">待结算金额</span>
            <span class="money_count_value">￥@Model.NotSettlementIncome.ToF2OrMark()</span>
        </div>

    </div>
</div>
<div class="" id="contentContainer">

    @*<div class="weui-cells__title">本月收益</div>*@
    <div class="weui-cells">
        <template>
            <div v-for="(item, index) in itemList ">
                <div class="weui-cell weui-cell_access income_current">
                    <div class="weui-cell__bd settlementItemLink" data-facilityid="SettlementID">
                        <span style="vertical-align: middle">结算单号：{{item.SettlementNumber}}</span>
                    </div>
                    <div class="weui-cell__ft">
                        <span style="font-size:12px;"></span>
                    </div>
                </div>
                <div class="weui-flex weui-cells__tips">

                    <div class="weui-flex__item"><div class="placeholder">金额：<span>￥{{decimalF2(item.Amount)}}</span> </div></div>

                    <div class="weui-flex__item" style="padding-right:5px;"><div class="placeholder">状态：<span>{{item.SettlementStatusText}}</span></div></div>
                </div>
                <div class="weui-flex weui-cells__tips">


                    <div class="weui-flex__item"><div class="placeholder">时间：<span>{{toYmdhmsTime(item.SettlementStartDate)}}</span> </div></div>
                </div>
            </div>
            <div class="weui-loadmore" v-show="loading" style="margin-bottom:100px;">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">{{loadingText}}</span>
            </div>
            @*没有更多数据后，占位符，因为这里有一个添加按钮，占走了很多高度*@
            <div class="no-more-data-placehoder" v-show="!loading" style="margin-bottom:100px;">
            </div>
        </template>
    </div>

</div>
@section ScriptSection{
    <script>
        new Vue({
            el: '#contentContainer',
            data: {
                itemList: [],
                page: 0,
                hasMore: true,
                loading: false,
                loadingText: '向上滑动加载更多...'
            },
            created () {
                let self = this;
                this.getItemList();
                this.scrollBottom();
            }
            ,
            mounted () {
                // 添加滚动事件，检测滚动到页面底部
                //window.addEventListener('scroll', this.scrollBottom)
            },
            methods: {
                scrollBottom: function () {
                    let self = this;
                    var baseVue = new BaseVue();
                    baseVue.scrollBottom(self);
                },
                onFacilityItemLinkClick: function (item) {
                    PageObj.onFacilityItemLinkClick(item.FacilityID);
                },
                decimalF2: function (num) {
                    return StringHelper.decimalF2(num);
                },
                toYmdhmsTime: function (time) {
                    return TimeHelper.ymdhmsTime(time);
                },
                toYmdTime: function (time) {
                    return TimeHelper.ymdTime(time);
                },
                getItemList: function () {
                    let self = this;
                    var organizationID = WinHelper.getUrlParam("organizationID");
                    var url = '@Url.Action("FindSettlementList", "Financial")';
                    url = WinHelper.urlWrap(url);
                    var paras = {};
                    paras.OrganizationID = organizationID;
                    paras.CurrentPageIndex = self.page;
                    showCommonLoading();
                    // 获取今日新闻
                    axios.post(url, paras)
                      .then((res) => {
                          hideCommonLoading();
                          console.log(res.data);
                          this.bindItemList(res.data);
                      });
                },
                bindItemList: function (data) {
                    let self = this;
                    $.each(data.Data.SettlementList, function (i, item) {
                        self.itemList.push(item);
                    });

                    self.loadingText = '向上滑动加载更多...'
                    if (self.itemList.length >= data.TotalCount) {
                        self.loadingText = "没有更多数据了...";
                        self.hasMore = false;
                        self.loading = false;
                    } else {
                        self.hasMore = true;
                        self.loading = true;
                    }
                }
            }
        })
    </script>
}
